import React from 'react';
import PropTypes from 'prop-types';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
import Header from '../components/Header';
import MainSection from '../components/MainSection';
import * as TodoActions from '../actions';

class App extends React.Component {
  // = ({todos, actions}) => (
  constructor(props) {
    super(props);
    props.actions.loadTodo();
  }
  render = () => {
    // console.log(this.props);
    return (
      <div>
        <Header addTodo={this.props.actions.addTodo} />
        <MainSection todos={this.props.todos} actions={this.props.actions} />
        <style jsx="true">
          {`
            button {
              margin: 0;
              padding: 0;
              border: 0;
              background: none;
              font-size: 100%;
              vertical-align: baseline;
              font-family: inherit;
              font-weight: inherit;
              color: inherit;
              -webkit-appearance: none;
              appearance: none;
              -webkit-font-smoothing: antialiased;
              -moz-osx-font-smoothing: grayscale;
            }

            :focus {
              outline: 0;
            }

            .hidden {
              display: none;
            }

            .todoapp {
              background: #fff;
              margin: 130px 0 40px 0;
              position: relative;
              box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2),
                0 25px 50px 0 rgba(0, 0, 0, 0.1);
            }

            .todoapp input::-webkit-input-placeholder {
              font-style: italic;
              font-weight: 300;
              color: #e6e6e6;
            }

            .todoapp input::-moz-placeholder {
              font-style: italic;
              font-weight: 300;
              color: #e6e6e6;
            }

            .todoapp input::input-placeholder {
              font-style: italic;
              font-weight: 300;
              color: #e6e6e6;
            }

            .todoapp h1 {
              position: absolute;
              top: -155px;
              width: 100%;
              font-size: 100px;
              font-weight: 100;
              text-align: center;
              color: rgba(175, 47, 47, 0.15);
              -webkit-text-rendering: optimizeLegibility;
              -moz-text-rendering: optimizeLegibility;
              text-rendering: optimizeLegibility;
            }

            .new-todo,
            .edit {
              position: relative;
              margin: 0;
              width: 100%;
              font-size: 24px;
              font-family: inherit;
              font-weight: inherit;
              line-height: 1.4em;
              border: 0;
              color: inherit;
              padding: 6px;
              border: 1px solid #999;
              box-shadow: inset 0 -1px 5px 0 rgba(0, 0, 0, 0.2);
              box-sizing: border-box;
              -webkit-font-smoothing: antialiased;
              -moz-osx-font-smoothing: grayscale;
            }

            .new-todo {
              padding: 16px 16px 16px 60px;
              border: none;
              background: rgba(0, 0, 0, 0.003);
              box-shadow: inset 0 -2px 1px rgba(0, 0, 0, 0.03);
            }

            .main {
              position: relative;
              z-index: 2;
              border-top: 1px solid #e6e6e6;
            }

            .toggle-all {
              text-align: center;
              border: none; /* Mobile Safari */
              opacity: 0;
              position: absolute;
            }

            .toggle-all + label {
              width: 60px;
              height: 34px;
              font-size: 0;
              position: absolute;
              top: -52px;
              left: -13px;
              -webkit-transform: rotate(90deg);
              transform: rotate(90deg);
            }

            .toggle-all + label:before {
              content: '❯';
              font-size: 22px;
              color: #e6e6e6;
              padding: 10px 27px 10px 27px;
            }

            .toggle-all:checked + label:before {
              color: #737373;
            }

            .todo-list {
              margin: 0;
              padding: 0;
              list-style: none;
            }

            .todo-list li {
              position: relative;
              font-size: 24px;
              border-bottom: 1px solid #ededed;
            }

            .todo-list li:last-child {
              border-bottom: none;
            }

            .todo-list li.editing {
              border-bottom: none;
              padding: 0;
            }

            .todo-list li.editing .edit {
              display: block;
              width: 506px;
              padding: 12px 16px;
              margin: 0 0 0 43px;
            }

            .todo-list li.editing .view {
              display: none;
            }

            .todo-list li .toggle {
              text-align: center;
              width: 40px;
              /* auto, since non-WebKit browsers doesn't support input styling */
              height: auto;
              position: absolute;
              top: 0;
              bottom: 0;
              margin: auto 0;
              border: none; /* Mobile Safari */
              -webkit-appearance: none;
              appearance: none;
            }

            .todo-list li .toggle {
              opacity: 0;
            }

            .todo-list li .toggle + label {
              background-image: url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2240%22%20height%3D%2240%22%20viewBox%3D%22-10%20-18%20100%20135%22%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2250%22%20fill%3D%22none%22%20stroke%3D%22%23ededed%22%20stroke-width%3D%223%22/%3E%3C/svg%3E');
              background-repeat: no-repeat;
              background-position: center left;
            }

            .todo-list li .toggle:checked + label {
              background-image: url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2240%22%20height%3D%2240%22%20viewBox%3D%22-10%20-18%20100%20135%22%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2250%22%20fill%3D%22none%22%20stroke%3D%22%23bddad5%22%20stroke-width%3D%223%22/%3E%3Cpath%20fill%3D%22%235dc2af%22%20d%3D%22M72%2025L42%2071%2027%2056l-4%204%2020%2020%2034-52z%22/%3E%3C/svg%3E');
            }

            .todo-list li label {
              word-break: break-all;
              padding: 15px 15px 15px 60px;
              display: block;
              line-height: 1.2;
              transition: color 0.4s;
            }

            .todo-list li.completed label {
              color: #d9d9d9;
              text-decoration: line-through;
            }

            .todo-list li .destroy {
              display: none;
              position: absolute;
              top: 0;
              right: 10px;
              bottom: 0;
              width: 40px;
              height: 40px;
              margin: auto 0;
              font-size: 30px;
              color: #cc9a9a;
              margin-bottom: 11px;
              transition: color 0.2s ease-out;
            }

            .todo-list li .destroy:hover {
              color: #af5b5e;
            }

            .todo-list li .destroy:after {
              content: '×';
            }

            .todo-list li:hover .destroy {
              display: block;
            }

            .todo-list li .edit {
              display: none;
            }

            .todo-list li.editing:last-child {
              margin-bottom: -1px;
            }

            .info {
              margin: 65px auto 0;
              color: #bfbfbf;
              font-size: 10px;
              text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
              text-align: center;
            }

            .info p {
              line-height: 1;
            }

            .info a {
              color: inherit;
              text-decoration: none;
              font-weight: 400;
            }

            .info a:hover {
              text-decoration: underline;
            }

            @media screen and (-webkit-min-device-pixel-ratio: 0) {
              .toggle-all,
              .todo-list li .toggle {
                background: none;
              }

              .todo-list li .toggle {
                height: 40px;
              }
            }

            @media (max-width: 430px) {
              .footer {
                height: 50px;
              }

              .filters {
                bottom: 10px;
              }
            }
          `}
        </style>
      </div>
    );
  };
}
App.propTypes = {
  todos: PropTypes.array.isRequired,
  actions: PropTypes.object.isRequired,
};

const mapStateToProps = state => ({
  todos: state.todos,
});

const mapDispatchToProps = dispatch => ({
  actions: bindActionCreators(TodoActions, dispatch),
});

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(App);
